<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        /* background: #5b6270; */
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Sider ref="side1" hide-trigger collapsible :collapsed-width="40"  style="background:white;">
                 <Tree :data="data1" :render="renderContent" ref="tree4"></Tree>
            </Sider>
            <Layout>
                <Content :style="{minHeight: '260px'}">
                    <Button type="primary" @click="creatData()">增加</Button>
                    <Table border :columns="columns7" :data="data6" style="color:black"></Table>
                    <Page :total="100" show-sizer @on-change="onChangePage" />
                </Content>
            </Layout>
        </Layout>
        <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <!-- <FormItem label="cateId" prop="cateId">
            <Input v-model="formValidate.cateId" placeholder="Enter your name"></Input>
        </FormItem> -->
        <FormItem label="产品类型" prop="type">
            <Input v-model="formValidate.type" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="产品名称" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="价格" prop="price">
          <Input v-model="formValidate.price" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="颜色" prop="color">
            <Input v-model="formValidate.color" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="尺寸" prop="size">
             <Input v-model="formValidate.size" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="安全" prop="safety">
            <Input v-model="formValidate.safety" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="用户体验" prop="UE">
            <Input v-model="formValidate.UE" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="操作难度" prop="operative">
            <Input v-model="formValidate.operative" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="质量" prop="quality">
            <Input v-model="formValidate.quality" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit(id)">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    </div>
    
</template>
<script>
   export default {
        data () {
            return {
                // 表单
                id:"",
                mid:'',
                formValidate: {
                    cateId:"",
                    type: "",
                    name: "",
                    price: "",
                    color: "",
                    size: "",
                    // date: '',
                    safety: "",
                    UE: "",
                    operative:"",
                    quality:""
                },ruleValidate: {//验证的规则
                    // cateId: [
                    //     { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    // ],
                    type: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        
                    ],
                    price: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    color: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                     size: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    // date: [
                    //     { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    // ],
                    safety: [
                        { required: true, message: 'Please select time', trigger: 'change' }
                    ],
                     UE: [
                        { required: true, message: 'Please select time', trigger: 'change' }
                    ],
                     operative: [
                        { required: true, message: 'Please select time', trigger: 'change' }
                    ],
                     quality: [
                        { required: true, message: 'Please select time', trigger: 'change' }
                    ]
                   
                },
                modal1:false,
                 columns7: [
                    {
                        title: '产品类型',
                        key: 'type',
                        // render: (h, params) => {
                        //     return h('div', [
                        //         h('Icon', {
                        //             props: {
                        //                 type: 'person'
                        //             }
                        //         }),
                        //         h('strong', params.row.name)
                        //     ]);
                        // }
                    },
                    {
                        title: '产品名称',
                        key: 'name'
                    },
                    {
                        title: '价格',
                        key: 'price'
                    },
                       {
                        title: '颜色',
                        key: 'color'
                    },
                       {
                        title: '尺寸',
                        key: 'size'
                    },
                       {
                        title: '安全',
                        key: 'safety'
                    },
                       {
                        title: '用户体验',
                        key: 'UE'
                    },
                       {
                        title: '操作难度',
                        key: 'operative'
                    },
                       {
                        title: '质量',
                        key: 'quality'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 130,
                        padding:0,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal1=true
                                            // this.show(params.index)
                                            this.editData(params.row._id);
                                            this.id=params.row._id;
                                            // console.log(params.row._id);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row._id);
                                            this.remove(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data1: [],
                data6: [],
                rows: 10,
                total:0,
                page:1,
                modal1: false,
                // cid:'5c09c8396193d31f2816d454'
                cid:''
            }
        },
        methods:{
            onChangePage(page){
                this.page=page;
                this.getnews(this.cid);
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: "100%",
                        cursor: 'pointer'
                    },on: {
                            click: () => { 
                            console.log(data._id);
                            this.mid=data._id;
                            this.getnews(data._id)
                             }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                ]);
            },
            getnews(id){
                this.cid=id;
                console.log(this.cid);
                this.axios({
                    url:'http://localhost:3000/product/list',
                    method:'post',
                    data:{                   
                        page:this.page,
                        rows:this.rows,
                        cateId:id
                    }
                }).then(res=>{
                    console.log(res)
                    this.data6=res.data.rows;
                    this.total=res.data.total;
                })
            },
            handleSubmit (id) {
                console.log(id);
                this.formValidate.cateId=this.cid;
               console.log(this.formValidate);
            //    var formData=this.formValidate;
            //    console.log(formData.id);
                if(id!=""){
                    // delete this.formValidate.cid;
                    this.axios({
                        url:`http://localhost:3000/product/${id}`,
                        method:'put',
                        data:this.formValidate
                    }).then(res=>{
                        this.getnews(this.cid);
                        this.$refs.formValidate.resetFields(); //表单清空
                        this.modal1=false;
                    })
                }else{
                    // delete formData._id;
                    this.axios({
                        url:'http://localhost:3000/product',
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        // this.getlist();
                        this.getnews(this.cid);
                        this.$refs.formValidate.resetFields(); //表单清空

                        this.modal1=false;
                    })
                }
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            getnlist(){
                this.axios({
                    url:'http://10.31.161.18:3000/cate/list/2',
                    method:'post'
                }).then(res=>{
                    this.data1=res.data;
                })
            },
            editData (id) {
                 this.axios({
                     url:`http://localhost:3000/product/${id}`,
                     method:'get'
                 }).then(res=>{
                     this.formValidate=res.data;
                     this.modal1=true;
                 })
            },
            creatData(){
                this.modal1=true;
            },
            remove (id) {
                console.log(id)
               this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>Are you sure?</p>',
                    onOk: () => {
                        this.$Message.info('Clicked ok');
                        this.axios({
                            url:`http://localhost:3000/product/${id}`,
                            method:'delete'
                        }).then(res=>{
                            this.getnews();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });    
            }
        },
        mounted(){
            this.getnlist();
            this.getnews();
        }
    }
</script>